<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>super关键字</title>
</head>
<body>
  <script>
    //我们知道this关键字总是指向函数所在的当前对象，es6又新增了另一个类似的关键字super,指向当前对象的原型对象。
    var proto = {
      foo: 'hello'
    };
    var obj = {
      foo: 'world',
      find() {
        return super.foo
      }
    };
    Object.setPrototypeOf(obj, proto);
    console.log(obj.find()) // 'hello'
    /**
     * 上面代码中，对象obj.find()方法中通过super.foo引用了原型对象proto的foo属性。
     * 注意：super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。
    */
   // 报错
  //  const obj = {
  //    foo: super.foo
  //  }
  // 报错
  // const obj = {
  //   foo: () => super.foo
  // }
  // 报错
  // const obj = {
  //   foo: function() {
  //     return super.foo
  //   }
  // }
  /**
   * 上面三种super的用法都会报错，因为对于JavaScript引擎来说，这里的super都没有用在对象的方法之中。
   * 第一种写法是super用在属性里面。第二种和第三种写法是super用在一个函数里面，然后赋值个foo属性。
   * 目前，只有对象方法的简写法可以让JavaScript引擎确认，定义的是对象的方法。
   *
   * JavaScript引擎内部，super.foo等同于Object.getPrototypeOf(this).foo （属性） 或
   * Object.getPrototypeOf(this).foo.call(this)（方法）。
  */
 var proto = {
   x: 'hello',
   foo() {
     console.log(this.x)
   }
 };
 var obj = {
   x: 'world',
   foo() {
     super.foo()
   }
 };
 Object.setPrototypeOf(obj,proto);
 obj.foo() // 'world'
// 上面代码中，super.foo指向原型对象proto的foo方法，但是绑定的this却还是当前对象obj,因此输出的就是world
  </script>
</body>
</html>